/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList, InputDatalist, InputIdProvider,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import { objNestSet} from "../../common/tool";
import {Dispatch, SetStateAction} from "react";

//常见模型：承压类的宏观检查 {特别的配置 } ，后的第三个字段标识：是否标题也是手工录入的？
//【特殊】 监检类别 当作 ”单位“栏目u:''对应的。
export const items工作内容 = [['资设计', {t: '设计单位', pr: '单位资质', span: 3, u:'C'},],
    ['资施工', {t: '施工单位',  },],
    ['资无损检', {t: '无损检测机构', },],
    ['设计文', {t: '设计文件（含变更）',pr: '技术文件', span: 3}, ],
    ['施组设', {t: '施工组织设计',}, ],
    ['无损艺', {t: '无损检测工艺',}, ],
    ['附件验', {t: '管道元件和安全附件验收', pr: '材料', span: 3}],
    ['标志移', {t: '材料标志移植',u:'B'}, ],
    ['料代用', {t: '材料代用',u:'C'}, ],
    ['阀门', {t: '阀门', pr:null} ],
    ['管口弯', {t: '管口加工、弯制、组对' }],
    ['焊工', {t: '焊工', pr: '焊接', span: 5, u:'B'} ],
    ['焊艺文', {t: '焊接工艺文件', u:'C'}],
    ['焊接材', {t: '焊接材料', u:'C/B'}],
    ['施焊', {t: '施焊', u:'B'} ],
    ['返焊', {t: '焊缝返修', u:'C'} ],
    //【极度特殊】这里若配置 span: 0 表示td不拆分，但是前缀pr也可针对不同编辑器区域的，再做冗余设置；上面已配过的span横跨多个拆分的Rows部分,继承pr栏目列的span。
    //span=0 解析器代码版本不一样， u单位栏目的自动合并rowSpan的解析器代码版本有稍微的不同： 还没有融合加参数逻辑的？。
    ['损质系', {t: '质保体系实施情况', pr: '无损检测', span: 5, u:'B'}, ],
    ['损测人', {t: '无损检测人员'}],
    ['损报告', {t: '无损检测记录、报告', u:'C'}],
    ['射线片', {t: '射线检测底片', u:'B'}],
    ['射线抽', {t: '射线检测现场抽查' }, ],
    ['防腐', {t: '防腐、保温', u:'C' }],
    ['穿跨', {t: '穿跨越工程',  }],
    ['安附件', {t: '安全附件', u:'C/B'}],
    ['耐压试', {t: '耐压试验', u:'A' }],
    ['漏试', {t: '泄漏试验（严密性试验）', u:'B' }],
    ['干燥', {t: '干燥与置换', u:'C' }],
    ['竣工资', {t: '竣工资料审查', u:'-' }],
    // ['宏其他', { }, true]
];


export const itemA工作内容: string[] = ['工作备注'];
items工作内容.forEach(([name, title, initIsp], i: number) => {
    itemA工作内容.push(name as string);
});
const 检验结果选=['符合','不符合','无此项'];
const 监检方法选=['Z','ZW','W','X','ZWX','WX','ZX','WX'];
interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
    //拆分的标签号码； 序号，以0为起点
    part: number;
}

const fixedFrom=[0,11,21];
const fixedTo=[11,21,28];
/**监检工作内容和检验结果报告 : 按part参数 拆成形成 三个编辑器区域；标题叙述：1-11' 12-21' 22-28' 【注意】配置地一致性要和报告的拆分统一split:[10,20] 。
 * 对应报告JobResponsibiliVw组件。
 * */
export const JobResponsibili =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, part}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA工作内容,);
        const {inp, setInp} = useItemInputControl({ref});
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text>{label}：</Text>
            <ASplitContent inp={inp} setInp={setInp} from={fixedFrom[part]} to={fixedTo[part]}/>
            { 2===part && <>
                <Text variant="h4">备注：</Text>
                <TextArea  value={inp?.工作备注 ||''} rows={8}
                           onChange={e => setInp({ ...inp, 工作备注: e.currentTarget.value||undefined}) } />
                </>
            }
        </InspectRecordLayout>;
    });

interface ASplitContentProps extends InternalItemProps {
    inp: any,
    setInp: Dispatch<SetStateAction<any>>,
    /**起点的所索引号 0开*/
    from: number;
    /**不包含这最后一个的*/
    to: number;
}
/**还是抽取出 可公用的代码为好。 可支持加hook的。
 * 【特别地】底下”确认日期“ 是增强形式：两个基础组件合并输出，被看作同一个组件地用法。
 * */
const ASplitContent= ({inp, setInp,from,to} : ASplitContentProps
) => {
    let oldPrefic='';
    let oldunit='';
    return <>
        { items工作内容.map(([name,conf,adddesc]: any, i:number) => {
            if(i<from || i>=to)  return null;
            const {t: title, pr: prefix, span,u:unit}=conf;
            oldPrefic=prefix===null? '' : prefix? prefix:oldPrefic;             //配置可继承性
            oldunit=unit===null? '' : unit? unit:oldunit;
            return (<React.Fragment key={i}>
                <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                    <Text>项目{i+1} - {oldPrefic} {'>'} {title}，类别{oldunit}：</Text>
                    {adddesc && <InputLine  label={'增加的项目'}>
                        <Input value={inp?.[name]?.a || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e => objNestSet(name,'a', e.currentTarget.value||undefined,inp,setInp) }/>
                    </InputLine>
                    }
                    监检方法
                    <InputDatalist value={(inp?.[name]?.c) || ''} datalist={监检方法选}
                                   style={{display: 'inline-flex', width: '5rem'}}
                                   onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                    &nbsp;检验结果
                    <InputIdProvider>
                        <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                       style={{display: 'inline-flex', width: '10rem'}}
                                       onListChange={v => objNestSet(name,'r', v||undefined,inp,setInp) } />
                    </InputIdProvider>
                    &nbsp;确认日期
                    <Input  value={inp?.[name]?.d ||''}  type='date' style={{display: 'inline-flex', width: '2.5rem'}}
                            onChange={e =>objNestSet(name,'d', e.currentTarget.value,inp,setInp)} />
                    <BlobInputList  value={inp?.[name]?.d ||''} datalist={[]}
                                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'d', v||undefined,inp,setInp) } />
                </div>
            </React.Fragment>);
        })}
        <hr/>
        注：“检验方法”可填写“Z”表示资料确认，“X”表示现场监督，“W”表示实物抽查。如有问题，将存在的问题记录在备注栏。
    </>;
};

